<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>老男孩合作社</title>

    <link rel="stylesheet" href="Font-Awesome-4.7/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/hero-slider-style.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/templatemo-style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        var tm_gray_site = false;
        if(tm_gray_site) {
            $('html').addClass('gray');
        }else {
            $('html').removeClass('gray');   
        }
    </script>
</head>

    <body>
        <div class="cd-hero">
            <div class="cd-slider-nav">
                <nav class="navbar">
                    <div class="tm-navbar-bg">
                        <a class="navbar-brand text-uppercase" href="#"><i class="fa fa-picture-o tm-brand-icon"></i>Old Boys Gallery</a>
                        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#tmNavbar">&#9776;</button>
                        <div class="collapse navbar-toggleable-md text-xs-center text-uppercase tm-navbar" id="tmNavbar">
                            <ul class="nav navbar-nav">
                                <li class="nav-item active selected">
                                    <a class="nav-link" href="#0" data-no="1">Old Boys <span class="sr-only">(current)</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div> 

            <ul class="cd-hero-slider">
                <li class="selected">
                    <div class="cd-full-width">
                        <div class="container-fluid js-tm-page-content" data-page-no="1" data-page-type="gallery">
                            <div class="tm-img-gallery-container">
                                <div class="tm-img-gallery gallery-one">
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/0.jpg" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/0.jpg">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/1.JPG" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/1.JPG">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/2.JPG" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/2.JPG">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/3.JPG" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/3.JPG">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>  
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/4.JPG" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/4.JPG">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/5.JPG" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/5.JPG">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/7.JPG" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/7.JPG">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/11.jpg" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/11.jpg">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/12.JPG" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/12.JPG">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/13.jpg" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/13.jpg">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/14.jpg" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/14.jpg">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/15.jpg" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/15.jpg">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/16.jpg" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/16.jpg">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/17.jpg" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/17.jpg">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/18.jpg" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/18.jpg">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/6.JPG" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/6.JPG">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/9.JPG" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/9.JPG">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/10.jpg" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/10.jpg">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="grid-item">
                                        <figure class="effect-sadie">
                                            <img src="img/8.JPG" alt="Image" class="img-fluid tm-img">
                                            <figcaption>
                                                <h2 class="tm-figure-title"></h2>
                                                <p class="tm-figure-description">Time is not old, we are not scattered!</p>
                                                <a href="img/8.JPG">View more</a>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>

            <footer class="tm-footer">
                <p class="tm-copyright-text">Copyright &copy; <span class="tm-copyright-year">current year</span>| Howie</p>
            </footer>

        </div> 

        <div id="loader-wrapper">
            <div id="loader"></div>
            <div class="loader-section section-left"></div>
            <div class="loader-section section-right"></div>
        </div>

        <script src="js/tether.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/hero-slider-main.js"></script>
        <script src="js/jquery.magnific-popup.min.js"></script>
        
        <script>
            function adjustHeightOfPage(pageNo) {
                var pageContentHeight = 0;
                var pageType = $('div[data-page-no="' + pageNo + '"]').data("page-type");
                if( pageType != undefined && pageType == "gallery") {
                    pageContentHeight = $(".cd-hero-slider li:nth-of-type(" + pageNo + ") .tm-img-gallery-container").height();
                }else {
                    pageContentHeight = $(".cd-hero-slider li:nth-of-type(" + pageNo + ") .js-tm-page-content").height() + 20;
                }
               
                var totalPageHeight = $('.cd-slider-nav').height()+ pageContentHeight+ $('.tm-footer').outerHeight();

                if(totalPageHeight > $(window).height()) {
                    $('.cd-hero-slider').addClass('small-screen');
                    $('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", totalPageHeight + "px");
                }else {
                    $('.cd-hero-slider').removeClass('small-screen');
                    $('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", "100%");
                }
            }

            $(window).load(function(){
                adjustHeightOfPage(1);
                $('.gallery-one').magnificPopup({
                    delegate: 'a',
                    type: 'image',
                    gallery:{enabled:true}
                });

                $('.gallery-two').magnificPopup({
                    delegate: 'a',
                    type: 'image',
                    gallery:{enabled:true}
                });

                $('.gallery-three').magnificPopup({
                    delegate: 'a',
                    type: 'image',
                    gallery:{enabled:true}                
                });

                $('#tmNavbar a').click(function(){
                    $('#tmNavbar').collapse('hide');
                    adjustHeightOfPage($(this).data("no"));
                });

                $( window ).resize(function() {
                    var currentPageNo = $(".cd-hero-slider li.selected .js-tm-page-content").data("page-no");
                    setTimeout(function() {
                        adjustHeightOfPage( currentPageNo );
                    }, 1000);
                });

                $('body').addClass('loaded');

                var str = new Date();
                var abc = str.getFullYear()+"年"+str.getMonth()+"月"+str.getDay()+"日";
                $(".tm-copyright-year").text(abc);
            });
        </script>
</body>
</html>
